<template>
	<view class="dream-wrap">
		<view v-if="detailInfo.length">
			<view class="dream-li" v-for="item) in detailInfo" :key="item._id">
				<img class="dream-img" @tap="previewImg(item.content)" v-if="item.content.includes('http')"
					:src="item.content" alt="" />
				<view v-html="highLight(item.content)" v-else></view>
			</view>
			<uni-load-more status="no-more"></uni-load-more>
			<!-- <view class="page-wrap">
				<uni-pagination @change="pageChange" class="page-container" :show-icon="true" :page-size="10"
					:total="total" title="标题文字" />
			</view> -->
		</view>

		<view v-else class="empty-wrap">
			<uv-empty mode="search"></uv-empty>
			<button class="empty-wrap-btn" @click="goBack" type="primary" size="mini">回到上层</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from "vue"
	import { DreamDetail } from "../../type/interface";
	import { http } from "../../utils/api.service";
	export default {

		data() {
			return {
				detailInfo: [],
				total: [],
				keyword: "",
				current: 1,
				isFinsh: false
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			getPresetDetail(preset : string, current : number) {
				http({
					url: `/list`,
					method: "GET",
					data: {
						keyword: preset,
						current,
						limit: 10
					}
				}).then((res : any) => {
					uni.hideLoading();
					console.log(res);
					if (!res.list.length) {
						this.isFinsh = true
					}
					this.total = res.count
					this.detailInfo.push(...res.list)
				})
			},
			previewImg(img_url : string) {
				const imgArr = []
				imgArr.push(img_url)
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				})
			},
			highLight(content) {
				const searchWord = this.keyword
				if (content.includes(searchWord)) {
					content = content.replace(
						searchWord,
						'<font style="color:red!important;">' + searchWord + '</font>'
					)
					return content
				}
				else {
					return content
				}
			}
		},
		onReachBottom() {
			console.log('到底了');
			if (this.isFinsh) return
			this.current += 1
			this.getPresetDetail(this.keyword, this.current)
		},
		onLoad(options) {
			// 页面加载时获取传递的参数
			const preset = options.keyword
			this.keyword = preset
			uni.showLoading({
				title: '加载中'
			})
			this.getPresetDetail(preset, 1)
		},
	}
</script>

<style lang="scss" scoped>
	.dream-wrap {
		padding-bottom: 50px;
	}

	.dream-li {
		padding: 12px 15px;
		font-size: 15px;
		color: #3b4144;
		line-height: 30px;
		border-top: 1px solid #e5e5e5;

		.dream-img {
			width: 100%;
		}
	}

	.page-wrap {
		padding: 10px;
		background-color: #fff;
		width: calc(100% - 20px);
		position: fixed;
		bottom: 0px;
	}

	.empty-wrap {
		padding: 80px;
		display: flex;
		flex-direction: column;
		&-btn {
			margin-top: 30px;
		}
	}
</style>